<template>
  <div>
    <MyHeader title="购物车"/>
    <div style="padding:45px 0 50px;">
      <MyGoods
        v-for="item in list"
        :key="item.id"
        :goodsObj="item"/>
    </div>
    <MyFooter/>
  </div>
</template>

<script>
import MyHeader from './components/MyHeader.vue'
import MyGoods from './components/MyGoods.vue'
import MyFooter from './components/MyFooter.vue'

/**
 * 目标：商品列表渲染
 * 1. 把数据保存到data变量中
 * 2. v-for变量MyGoods组件 传入每个商品对象（父传子）
 * 3. MyGoods接收父传入的数据，并把对象相应的属性展示在指定标签位置
 * 4. MyGoods把父给的商品对象，再次传给MyCount，把goods_count属性与input双向绑定
 * 5. 样式 - 中间的盒子 加个上下padding，padding: 45px 0 50px
 */
export default {
  data(){
    return {
      list: []
    }
  },
  components: {
    MyHeader,
    MyGoods,
    MyFooter
  },
  // 组件创建后 - 立即发送网络请求
  created(){
    this.$axios({
      method: 'GET',
      url: '/api/cart '
    }).then(resp => {
      // console.log(resp.data)
      this.list = resp.data.list
    }).catch(e => {
      console.error(e)
    })
  }
}
</script>

<style>

</style>